<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>
        添加原料名称
    </h1>
</section>
<section class="content">
    <form id="materialForm" class="form-horizontal">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3>原料名称基本信息</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="materialKind" class="col-sm-2 control-label">分类</label>
                                    <div class="col-sm-10">
                                        <select id="materialKind" class="form-control" name="materialKind"
                                                style="width: 100%;">
                                            <option value="">请选择</option>
                                            <option value="型材">型材</option>
                                            <option value="板材">板材</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="matTypeId" class="col-sm-2 control-label">类型</label>
                                    <div class="col-sm-10">
                                        <select id="matTypeId" class="form-control select2" name="matTypeId"
                                                style="width: 100%;">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matQualityId" class="col-sm-2 control-label">材质</label>
                                    <div class="col-sm-10">
                                        <select id="matQualityId" class="form-control select2" name="matQualityId"
                                                style="width: 100%;">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matSpecId" class="col-sm-2 control-label">规格</label>
                                    <div class="col-sm-10">
                                        <select id="matSpecId" class="form-control select2" name="matSpecId"
                                                style="width: 100%;">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matWidth" class="col-sm-2 control-label">宽度</label>
                                    <div class="col-sm-10">
                                        <input type="number" step="0.1" style="padding-right: 5px;" class="form-control"
                                               id="matWidth" name="matWidth" autocomplete="off"
                                               placeholder="请输入宽度">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matLength" class="col-sm-2 control-label">长度</label>
                                    <div class="col-sm-10">
                                        <input type="number" step="0.1" style="padding-right: 5px;" class="form-control"
                                               id="matLength" name="matLength" autocomplete="off"
                                               placeholder="请输入长度">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matHeight" class="col-sm-2 control-label">米重/厚度</label>
                                    <div class="col-sm-10">
                                        <input type="number" step="0.1" style="padding-right: 5px;" class="form-control"
                                               id="matHeight" name="matHeight" autocomplete="off"
                                               placeholder="请输入米重/厚度">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matStockId" class="col-sm-2 control-label">区位</label>
                                    <div class="col-sm-10">
                                        <select id="matStockId" class="form-control select2" name="matStockId"
                                                style="width: 100%;">
                                            <option value="">请选择</option>
                                            <option th:each="type:${materialStock}" th:value="${type.whiId}"
                                                    th:text="${type.whiName}"></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matNumUnit" class="col-sm-2 control-label">数量单位</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" id="matNumUnit" name="matNumUnit"
                                               placeholder="请输入数量单位">
                                    </div>
                                    <label for="matWeightUnit" class="col-sm-2 control-label">重量单位</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" id="matWeightUnit" name="matWeightUnit"
                                               placeholder="请输入重量单位">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matFormulaType" class="col-sm-2 control-label">重量公式</label>
                                    <div class="col-sm-10">
                                        <select id="matFormulaType" class="form-control select2" name="matFormulaType"
                                                style="width: 100%;">
                                            <option value="">请选择</option>
                                            <option value="">&nbsp;</option>
                                            <option value="1">
                                                （规格*宽度*长度*数量*7.85/1000）-（(规格-2*米重/厚度)*（宽度-2*米重/厚度）*7.85/1000*数量*长度
                                            </option>
                                            <option value="2">规格*规格*长度*数量*0.00617</option>
                                            <option value="3">长度*数量*米重/厚度</option>
                                            <option value="4">（规格-宽度）*宽度*0.02466*长度*数量</option>
                                            <option value="5">规格*宽度*长度*2.7/1000000*数量</option>
                                            <option value="6">规格*宽度*长度*7.85/1000000*数量</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="matSapNameDesc" class="col-sm-2 control-label">SAP物料描述</label>
                                    <div class="col-sm-10">
                                        <input type="text" style="padding-right: 5px;" class="form-control"
                                               id="matSapNameDesc" name="matSapNameDesc" autocomplete="off"
                                               placeholder="请输入SAP物料描述">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <button type="button" id="btn_create" class="btn btn-info pull-right">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
<div th:include="include :: footer"></div>
<script>

    $(function () {

        // 验证初始化
        js.validate.init("materialForm", {
            fields: {
                materialKind: {validators: {notEmpty: {message: '请选择分类'}}}
            }
        });

        // 创建原料名称
        $("#btn_create").click(function () {

            var matTypeId = $("#matTypeId").val();
            if (matTypeId == null || matTypeId == "") {
                js.modal.warning("请选择类型！");
                $("#matTypeId").focus();
                return false;
            }

            var matQualityId = $("#matQualityId").val();
            if (matQualityId == null || matQualityId == "") {
                js.modal.warning("请选择材质！");
                $("#matQualityId").focus();
                return false;
            }

            var matSpecId = $("#matSpecId").val();
            if (matSpecId == null || matSpecId == "") {
                js.modal.warning("请选择规格！");
                $("#matSpecId").focus();
                return false;
            }

            js.validSubmit({
                formId: "materialForm",
                url: ctx + "basic/materials/save",
                data: new FormData($("#materialForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        location.href = ctx + "basic/materials/page";
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        });

        // 分类下拉选值改变事件
        $("#materialKind").change(function () {


            js.get({
                url: ctx + "basic/materials/materialDictionary",
                data: {kindName: $('#materialKind option:selected').val()},
                success: function (result) {

                    if (result.type === web_status.SUCCESS) {
                        $("#matTypeId").empty().append('<option value="">请选择</option>');
                        $.each(result.data.materialTypeList, function (i, v) {
                            $("#matTypeId").append('<option value="' + v.mdId + '">' + v.mdName + '</option>');
                        });
                        //必不可少的刷新
                        $("#matTypeId").selectpicker('refresh');

                        $("#matQualityId").empty().append('<option value="">请选择</option>');
                        $.each(result.data.materialQualityList, function (i, v) {
                            $("#matQualityId").append('<option value="' + v.mdId + '">' + v.mdName + '</option>');
                        });
                        //必不可少的刷新
                        $("#matQualityId").selectpicker('refresh');

                        $("#matSpecId").empty().append('<option value="">请选择</option>');
                        $.each(result.data.materialSpecList, function (i, v) {
                            $("#matSpecId").append('<option value="' + v.mdId + '">' + v.mdName + '</option>');
                        });
                        //必不可少的刷新
                        $("#matSpecId").selectpicker('refresh');
                    }
                }
            });
        });

        $("#matTypeId").change(function () {

            js.get({
                url: ctx + "basic/materials/getFormulaType",
                data: {matTypeId: $('#matTypeId option:selected').val()},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        $("#matFormulaType").val(result.data).trigger("change");
                    }
                }
            });
        });

    });
</script>
</body>
</html>
